<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="alert-header">
				<view class="cancle" @click="cancle">
					取消
				</view>
				<view class="title">
					请选择
				</view>
				<view class="confirm" @click="confirm">
					确定
				</view>
			</view>
			<view class="alert-content">
				<!-- <view class="alert-content-left"> 
					<view 
						class="alert-content-left-item" 
						v-for="(item,idx) in dataList" 
						:key="`left${idx}`"
						:class="currentLeftIdx==idx?'alert-content-left-item-select':''"
						@click="leftItemClicked(idx)"
					>
						<text :class="currentLeftIdx==idx?'left-item-select-text':'left-item-default-text'">{{item.dictLabel}}</text>
					</view>
				</view> -->
				<view class="alert-content-right">
					<view 
						style="padding: 0rpx 18rpx;"
						class="alert-content-right-item" 
						v-for="(item,idx) in rightListData"
						:key="`right${idx}`"
						:class="curentRightIdx==idx?'alert-content-right-item-select':''"
						@click="rightItemClicked(idx)"
					>
						<text :class="curentRightIdx==idx?'right-item-select-text':'right-item-default-text'">{{item['projectName']}}</text>
						<!-- <image class="right-item-select" v-if="curentRightIdx==idx" src="../static/image/list-select.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<!-- <view class="add-box">
				<FormFooter button-title="没有我的项目,手动输入" @submitClicked='addButtonClicked'></FormFooter>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import FormFooter from '@/components/FormFooterView.vue'
	export default {
		name:"UseTypeAlert",
		data() {
			return {
				rightListData:[],
				// currentLeftIdx:0,
				curentRightIdx:0,
				// dataList:[]
			};
		},
		components: {
			FormFooter,
		},
		mounted() {
			// this.rightListData = this.dataList[this.currentLeftIdx].children
			this.loadData()
		},
		methods: {
			loadData(){
				request.post('/lsydfk/applies/page/query',{
					currentPage:0,
					pageSize:1000
				}).then(res=>{
					// this.dataList = res
					this.rightListData = res.records
				}).catch(err=>{
					
				})
			},
			show() {
				this.$refs.popup.open('bottom')
			},
			// leftItemClicked(val){
			// 	this.currentLeftIdx = val
			// 	this.rightListData = this.dataList[this.currentLeftIdx].children
			// },
			addButtonClicked(){
				this.$emit('addOther')
				this.$refs.popup.close()
			},
			rightItemClicked(val){
				this.curentRightIdx = val
			},
			cancle(){
				this.$refs.popup.close()
			},
			confirm(){
				console.log(this.rightListData,this.curentRightIdx)
				this.$emit('confirm',this.rightListData[this.curentRightIdx])
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="scss">
	.alert-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #CCCCCC;
		height: 100rpx;
		background-color: #ffffff;
		padding: 0rpx 40rpx;
		.cancle{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.title{
			font-size: 32rpx;
			color: #333333;
			line-height: 47rpx;
		}
		.confirm{
			ont-weight: 400;
			font-size: 28rpx;
			color: #1764CE;
			line-height: 40rpx;
		}
	}
	.alert-content{
		height: 688rpx;
		background-color: #ffffff;
		display: flex;
		// margin-bottom: 140rpx;
		&-left{
			width: 288rpx;
			&-item{
				height: 92rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: center;
				background-color: #ffffff;
				display: flex;
				align-items: center;
			}
			&-item-select{
				background-color: #F7F8FB;
			}
			.left-item-select-text{
				color: #1764CE;
				width: 100%;
				border-left: solid 5rpx #1764CE;
				min-height: 34rpx;
				box-sizing: border-box;
			}
			.left-item-default-text{
				width: 100%;
				min-height: 34rpx;
			}
		}
		&-right{
			flex: 1;
			overflow: scroll;
			&-item{
				height: 92rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: center;
				background-color: #ffffff;
				display: flex;
				align-items: center;
			}
			&-item-select{
				background-color: #F7F8FB;
				padding: 0rpx 18rpx;
			}
			.right-item-select-text{
				color: #363A44;
				font-size: 20px;
				width: 100%;
				// border-left: solid 5rpx #1764CE;
				height: 34rpx;
				box-sizing: border-box;
				white-space: nowrap;
			}
			.right-item-default-text{
				width: 100%;
				height: 34rpx;
				font-size: 18px;
				color: #B3B5B9;
				white-space: nowrap;
			}
			.right-item-select{
				width: 40rpx;
				height: 36rpx;
			}
		}
	}


</style>